<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery扁平化风格的对话框插件Dialogbox DEMO演示</title>
<link rel="stylesheet" href="jquery.dialogbox-1.0.css">
</head>

<body>
<center>
<h1>jQuery Dialogbox Plugin Examples</h1>
<!-- Buttons -->
<br><br>

<button id="Testtt">Test Prompt</button>
<button id="Testtt1">Test Prompt1</button>
<br><br>
<!-- Scripts -->
</center>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="jquery.dialogbox-1.0.js"></script>

<!--[if lte IE 8]>
<style>

.dialogbox-back {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#5f000000,endColorstr=#5f000000);
    text-align: center;
    display: none;
}

</style>
<![endif]-->

<script>
    $(document).ready(function(){
	
		$('body').dialogbox({
				type:"normal",title:"我是标题",
				buttons:[{
					Text:"提交结果",
					ClickToClose:true,
					callback:function (dialog){
						var id1 = $(dialog).find("input[name='companyRdoID']:checked").val();
                        returnData = {
                            "ID": id1,
                            "ShowText": $(dialog).find("#companyShowText" + id1).val()
                        };
						alert(returnData+ id1 +"returnData:" + returnData.ID + " " + returnData.ShowText);
					}
				}],
				message:'<div id="companySelectFotmTable" style="display:table;width:100%;"><div id="comapnyRowId1" style="display:table-row;"><div style="display:table-cell;"><input type="radio" name="companyRdoID" id="companyRdoID1" value="1"></div><div style="display:table-cell;"><label for="companyRdoID1">我是选项1</label></div><div style="display:table-cell;"><label for="companyRdoID1">2018-12-30</label></div><div style="display:table-cell;"><label for="companyRdoID1">abc</label></div><input type="hidden" id="companyShowText1" value="我是选项1"></div></div>'
			});
			
			$('body').dialogbox({
				type:"normal",title:"我是标题1",
				buttons:[{
					Text:"提交结果",
					ClickToClose:true,
					callback:function (dialog){
					alert($(dialog).html());
						var id1 = $(dialog).find("input[name='companyRdoID']:checked").val();
                        returnData = {
                            "ID": id1,
                            "ShowText": $(dialog).find("#companyShowText" + id1).val()
                        };
						alert(returnData+ id1 +"returnData:" + returnData.ID + " " + returnData.ShowText);
					}
				}],
				message:'<div id="companySelectFotmTable" style="display:table;width:100%;"><div id="comapnyRowId1" style="display:table-row;"><div style="display:table-cell;"><input type="radio" name="companyRdoID" id="companyRdoID1" value="1"></div><div style="display:table-cell;"><label for="companyRdoID1">我是选项1</label></div><div style="display:table-cell;"><label for="companyRdoID1">2018-12-30</label></div><div style="display:table-cell;"><label for="companyRdoID1">abc</label></div><input type="hidden" id="companyShowText1" value="我是选项1"></div></div>'
			});
	
		$("#Testtt").click(function() {
            $('body').dialogbox({
				type:"normal",title:"我是标题",
				buttons:[{
					Text:"123123",
					ClickToClose:true,
					callback:function (dialog){
					alert($(dialog).html());
						var id1 = $(dialog).find("input[name='companyRdoID']:checked").val();
                        returnData = {
                            "ID": id1,
                            "ShowText": $(dialog).find("#companyShowText" + id1).val()
                        };
						alert(returnData+ id1 +"returnData:" + returnData.ID + " " + returnData.ShowText);
					}
				}],
				message:'<div id="companySelectFotmTable" style="display:table;width:100%;"><div id="comapnyRowId1" style="display:table-row;"><div style="display:table-cell;"><input type="radio" name="companyRdoID" id="companyRdoID1" value="1"></div><div style="display:table-cell;"><label for="companyRdoID1">我是选项1</label></div><div style="display:table-cell;"><label for="companyRdoID1">2018-12-30</label></div><div style="display:table-cell;"><label for="companyRdoID1">abc</label></div><input type="hidden" id="companyShowText1" value="我是选项1"></div></div>'
			});
        });
		
		$("#Testtt1").click(function() {
            $('body').dialogbox({
				type:"normal",title:"我是标题1",
				buttons:[{
					Text:"321321",
					ClickToClose:true,
					callback:function (dialog){
					alert($(dialog).html());
						var id1 = $(dialog).find("input[name='companyRdoID']:checked").val();
                        returnData = {
                            "ID": id1,
                            "ShowText": $(dialog).find("#companyShowText" + id1).val()
                        };
						alert(returnData+ id1 +"returnData:" + returnData.ID + " " + returnData.ShowText);
					}
				}],
				message:'<div id="companySelectFotmTable" style="display:table;width:100%;"><div id="comapnyRowId1" style="display:table-row;"><div style="display:table-cell;"><input type="radio" name="companyRdoID" id="companyRdoID1" value="1"></div><div style="display:table-cell;"><label for="companyRdoID1">我是选项1</label></div><div style="display:table-cell;"><label for="companyRdoID1">2018-12-30</label></div><div style="display:table-cell;"><label for="companyRdoID1">abc</label></div><input type="hidden" id="companyShowText1" value="我是选项1"></div></div>'
			});
        });
	
    });
</script>
<!-- The End -->

</body>
</html>